"use server"
import { Flex, Menu } from "antd"
import { getQuestionBankVOById } from "@/api/question-bank"
import { getQuestionVOById } from "@/api/question"
import Sider from "antd/es/layout/Sider"
import { Content } from "antd/es/layout/layout"
import Title from "antd/es/typography/Title"
import Link from "next/link"
import QuestionCard from "@/components/question-card"
import "./index.css"

interface Props {
  params: {
    questionBankId: number // 题库ID
    questionId: number // 题目ID
  }
}

/**
 * 题库题目详情页
 */
export default async function QuestionPage({ params }: Props) {
  const { questionBankId, questionId } = params

  let bank: QuestionBankVO | null = null
  let question: QuestionVO | null = null

  try {
    const res = await getQuestionBankVOById({
      id: questionBankId,
      needQueryQuestionList: true,
      pageSize: 200
    })
    bank = res.data
  } catch (error) {
    console.error("获取题库详情失败，" + error)
  }

  if (!bank) {
    return <div>获取题库详情失败，请刷新重试</div>
  }

  try {
    const res = await getQuestionVOById({
      id: questionId
    })
    question = res.data
  } catch (error) {
    console.error("获取题目详情失败，" + error)
  }

  if (!question) {
    return <div>获取题目详情失败，请刷新重试</div>
  }

  const questionMenuItemList = (bank.questionPage?.records ?? []).map((q) => {
    return {
      label: <Link href={`/bank/${questionBankId}/question/${questionId}`}>{q.title}</Link>,
      key: q.id
    }
  })

  return (
    <div id="bank-question-page" className="max-width-content">
      <Flex gap={24}>
        <Sider width={240} theme="light" style={{ padding: "24px 0" }}>
          <Title level={4} style={{ padding: "0 20px" }}>
            {bank.title}
          </Title>
          <Menu items={questionMenuItemList} selectedKeys={[question.id.toString()]} />
        </Sider>
        <Content>
          <QuestionCard question={question} />
        </Content>
      </Flex>
    </div>
  )
}
